<template>
	<view>
		<view class="pr cats-bg" v-if="list.length>0">
			<view class="flex">
				<view @tap.stop="to_detail(index)" class="cats-item flex flex-y flex-x-y" v-for="(item,index) in list"
					:key="index">
					<image :src="item.headPortrait" style="" mode="aspectFill">
					</image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cats",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			to_detail(index) {
				this.toPage('/pages/search/search?index=' + (index + 1));
			}
		}
	}
</script>

<style>
	.cats-bg {
		height: 230rpx;
		background-color: red;
		margin-top: -60rpx;
		background: url(../../static/erqi/bg2.png) left top / 100% 100% no-repeat;
		padding: 0 40rpx;
		overflow-y: visible;
	}

	.cats-item {
		width: 25%;
		margin-top: -40rpx;
	}

	.cats-item image {
		width: 140rpx;
		height: 120rpx;
	}

	.cats-item view {
		color: #666666;
		font-size: 26rpx;
		margin-top: -14rpx;
	}
</style>
